<template>
  <div class="rcbj-view">
    <el-form
      ref="form"
      label-position="right"
      label-width="180px"
      :model="formdata"
      :rules="rules"
    >
      <div class="cms">
        <el-form-item
          :label="item.cm + '：'"
          :prop="'cm' + index"
          v-for="(item, index) in currentRow"
          :key="index"
        >
          <div class="flex-y-center">
            <h3 class="form-item-jiage m-r-10">
              {{ item.jg + "元" }}
            </h3>

            <el-input-number
              :min="1"
              v-model="formdata['cm' + index]"
              clearable
            ></el-input-number>
          </div>
        </el-form-item>
      </div>

      <el-form-item label="地址：" prop="dizhi">
        <el-input
          placeholder="请输入地址"
          v-model="formdata.dizhi"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="手机\电话：" prop="phone">
        <el-input
          placeholder="请输入手机或电话"
          v-model="formdata.phone"
          clearable
        ></el-input>
      </el-form-item>
      <br />
      <el-form-item label="留言：" prop="leavingAMessage">
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 8 }"
          placeholder="留言内容"
          v-model="formdata.leavingAMessage"
          style="width: 500px"
          clearable
        >
        </el-input>
      </el-form-item>

      <div class="jiner">
        <el-button type="warning" class="tijiao" plain @click="submitForm"
          >提交订单</el-button
        >
        <div class="text">{{ amountOfMoney }}&ensp;元</div>
      </div>
    </el-form>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  data() {
    var validateMobile = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入手机号"));
      } else if (!/^1[3|5|7|8|9]\d{9}$/.test(value)) {
        callback(new Error("请输入正确的手机号码格式"));
      } else {
        callback();
      }
    };

    return {
      user: JSON.parse(localStorage.getItem("xm-user") || "{}"),
      butloading: false,
      formdata: {
        type: 2,
        dizhi: "",
        phone: "",
      },
      rules: {
        dizhi: [{ required: true, message: "请输入地址", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validateMobile, trigger: "blur" },
        ],
      },
      currentRow: [],
      zaocan: [
        {
          cm: "红豆粥",
          jg: 10,
        },
        {
          cm: "馒头",
          jg: 10,
        },
        {
          cm: "五香蛋",
          jg: 10,
        },
      ],
      zhongcan: [
        {
          cm: "红烧肉",
          jg: 10,
        },
        {
          cm: "蒜泥生菜",
          jg: 10,
        },
        {
          cm: "西红柿炒鸡蛋",
          jg: 10,
        },
        {
          cm: "丝瓜圆子汤",
          jg: 10,
        },
      ],
      wancan: [
        {
          cm: "红烧鸭子",
          jg: 10,
        },
        {
          cm: "空心菜",
          jg: 10,
        },
        {
          cm: "瓜炒肉片",
          jg: 10,
        },
        {
          cm: "海带蛋汤",
          jg: 10,
        },
      ],
    };
  },
  created() {
    const currentRow = this.$route.query.currentRow;
    if (currentRow == 1) {
      this.currentRow = this.zaocan;
    }
    if (currentRow == 2) {
      this.currentRow = this.zhongcan;
    }
    if (currentRow == 3) {
      this.currentRow = this.wancan;
    }

    this.currentRow.forEach((v, index) => {
      this.$set(this.formdata, `cm${index}`, 1);
    });
  },
  computed: {
    amountOfMoney() {
      let val = 0;
      this.currentRow.forEach((v, index) => {
        let shuliang = this.formdata[`cm${index}`];
        let jiage = v.jg;
        val += shuliang * jiage;
      });
      return val.toFixed(2);
    },
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(async (valid) => {
        console.log("🚀 ~ this.$refs.form.validate ~ valid:", valid);
        this.butloading = true;
        if (valid) {
          const json = {
            ...this.formdata,
            typelabel:
              "点餐-" + this.$route.query.currentRow === 1
                ? "早餐"
                : this.$route.query.currentRow === 2
                ? "中餐"
                : "晚餐",
            currentRow: this.currentRow.map((v, index) => {
              let ccm = this.formdata[`cm${index}`];
              return {
                ...v,
                sum: ccm,
              };
            }),
            currentIndex: this.$route.query.currentRow,
          };

          this.currentRow.map((v, index) => {
            delete json[`cm${index}`];
          });

          const res = await this.$request({
            url: "/order/add",
            method: "POST",
            data: {
              type: this.formdata.type,
              phone: this.formdata.phone,
              dizhi: this.formdata.dizhi,
              isdel: 0,
              leavingAMessage: this.formdata.leavingAMessage,
              fuwudate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
              paymentStatus: 1,
              json: JSON.stringify(json),
              userId: this.user.id,
              jiner: this.amountOfMoney,
            },
          });

          if (res.code == 200) {
            this.$message.success("提交成功");
            setTimeout(() => {
              this.$router.push({
                name: "orderResult",
                query: {
                  stepsactive: 4,
                },
              });
            }, 1000);
          }
          this.butloading = false;
        } else {
          this.butloading = false;
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.rcbj-view {
  padding: 0 5vw;
}

::v-deep .el-form-item__label {
  font-size: 26px;
}

.jiner {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;

  .text {
    width: 200px;
    height: 55px;
    border: 1px solid #c6c6c6;
    font-size: 26px;
    font-weight: 700;
    line-height: 55px;
    text-align: center;
    color: #ff8585;
    border-radius: 3px;
  }

  .tijiao {
    width: 200px;
    height: 55px;
    font-size: 20px;
    margin-left: 20px;
  }
}

.cms {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 30px;

  &::v-deep .el-form-item__label {
    font-size: 18px;
  }
}

.form-item-jiage {
  width: 100px;
  border: 1px solid #c0c4cc;
  font-weight: 700;
  font-size: 24px;
  background-color: #f5f7fa;
  color: #606266;
  text-align: center;
  padding: 3px 0;
  border-radius: 5px;
}
</style>
